@charset "utf-8";
@import "common/run";
//动态把px变成rem
.web{
    width: 100%;
//  padding-top: r(89px);
//  padding-bottom: r(91px);
    header{
       width: 100%;
        height: r(89px);
        background: #b20000;
        line-height: r(89px);
        z-index:10;
        position: fixed;
        top: 0;
        left: 0;
        
        label:first-child{
            margin-left: r(23px);
            width: r(30px);
            img{
                width: 100%;
                vertical-align: middle;
            }
        }
        a{
            margin: 0 auto;
            display: block;
            width: r(264px);
            width: r(264px);
            line-height: r(89px);
            img{
                width: 100%;
                 vertical-align: middle;
            }
           
        }
        label:nth-child(2){
            margin-right: r(17px);
            width: r(47px);
            img{
                width: 100%;
                 vertical-align: middle;
            }
        }
    }
    footer{
        width: 100%;
        height: r(91px);
        position: fixed;
        bottom: 0;
        left: 0;
        box-sizing: border-box;
        background: #f5f5f5;
        border-top:2px solid #c8c6c7;
        padding: r(16px) 0 r(8px);
        ul{
           
            li{
                float: left;
                width: 20%;
                text-align: center;
                
                a{
                    width: 100%;
                    height: 100%;
                    color: #8b8b8b;
                    display: block;
                    i{
                        font-size: r(38px);
                    }
                    span{
                        font-size: r(20px);
                    }
                }
                a:hover{
                    color: #B20000;
                }
            }
            li:not(:first-child){
                background: url(../images/common/foot_line.jpg) no-repeat left center;
            }
            
        }
    }
    .hot_search{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 11;
        background: #f1f1f1;
        overflow-y: hidden;
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        transition: all 1s;
        .hot_search_top{
            width: 100%;
            height: r(87px);
            background: #1f1f1f;
            line-height: r(87px);
            span{
                display: inline-block;
            }
            .delete{
                display: inline-block;
                margin-left: r(12px);
                width: r(50px);
                height: r(50px);
                border-radius: 50%;
                background: red;
                text-align: center;
                line-height: r(50px);
                i{
                    font-size: r(23px);
                    color: white;
                }
            }
            span{
                margin-left: r(26px);
                width: r(530px);
                height: r(48px);
                border: r(2px) solid white;
                border-radius: r(48px);
                line-height: r(48px);
                
                
                .fangdajing{
                     i{
                    font-size: r(27px);
                    color: white;
                    margin-left: r(14px);
                    }
                }
                input{
                    
                    margin-left: r(21px);
                    display: inline-block;
                    width: r(439px);
                    height: r(47px);border: none;
                    outline: none;
                    font-size: r(27px);
                    background: #1F1F1F;
                    color: white;
                }
            }
        }
        .hot_search_section{
            width: r(578px);
            margin-top: r(32px);
            margin-left: r(30px);
            span{
                font-family: "微软雅黑";
                font-size: r(26.63px);
                
            }
            .hot_search_nr{
                a{
                    display: inline-block;
                    margin-top: r(16px);
                    padding-left: r(16px);
                    padding-right: r(16px);
                    height: r(54px);
                    border:r(1px) solid #8B8B8B;
                    text-align: center;
                    line-height: r(54px);
                    background: white;
                    color: #8B8B8B;
                }
            }
        }
        
    }
    
    
    
     .search{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 11;
        background: #f1f1f1;
        overflow-y: hidden;
        transform: translateY(-200%);
        -webkit-transform: translateY(-200%);
        transition: all 1s;
        .search_top{
            width: 100%;
            height: r(87px);
            background: #1f1f1f;
            line-height: r(87px);
            span{
                display: inline-block;
            }
            label{
                display: inline-block;
                margin-left: r(12px);
                width: r(50px);
                height: r(50px);
                border-radius: 50%;
                background: red;
                text-align: center;
                line-height: r(50px);
                i{
                    font-size: r(23px);
                    color: white;
                }
            }
            span{
                margin-left: r(26px);
                width: r(530px);
                height: r(48px);
                border: r(2px) solid white;
                border-radius: r(48px);
                line-height: r(48px);
                
                
                 i{
                     
                    font-size: r(27px);
                    color: white;
                    margin-left: r(14px);
                }
                input{
                    
                    margin-left: r(21px);
                    display: inline-block;
                    width: r(439px);
                    height: r(47px);border: none;
                    outline: none;
                    font-size: r(27px);
                    background: #1F1F1F;
                    color: white;
                }
            }
        }
        .search_section{
            width: r(580px);
            height: r(249px);
            background: white;
            margin-left: r(30px);
            margin-top: r(14px);
            span{
                display: inline-block;
                margin-top: r(23px);
                margin-left: r(17px);
            }
            span:nth-child(1){
                font-size: r(26.63px);
                font-family: "微软雅黑";
                a{color: red;}
            }
            span:nth-child(2){
                font-size: r(22px);
                font-family: "微软雅黑";
                color: #8B8B8B;
                line-height: r(30px);
            }
             span:nth-child(3){
                font-size: r(22px);
                font-family: "微软雅黑";
                color: #8B8B8B;
                line-height: r(30px);
            }
            span:nth-child(5){
                font-size: r(18px);
                font-family: "微软雅黑";
                color: #8B8B8B;
                
            }
        }
        .search_section1{
            margin-top: r(36px);
        }
    }
    
    
    
    .load{
        width: 100%;
        height: 100%;
        position:absolute;
        top: 0;
        left: 0;
        z-index: 11;
        background: #222222;
        overflow-y: hidden;
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transition: all 1s;
        .load_logo{
            width:r(161px);
            height:r(136px);
            margin-left:r(248px);
            margin-top:r(193px);
            img{
                width: 100%;
            }
        }
        .load_usr{
            width: r(492px);
            height: r(53px);
            margin-left: r(73px);
            margin-top: r(47px);
            div:first-child{
                 float: left;
                display: inline-block;
                width: r(61px);
                height: r(53px);
                background: #303030;
                text-align: center;
//              line-height: r(px);
//              vertical-align: middle;
                i{
                    margin-top: r(11px);
                    display: inline-block;
                    width: r(30px);
                    height: r(30px);
                    img{
                    width: 100%;
                    
                    }
                }
            }
            div:last-child{
                float: left;
                
                display: inline-block;
                width: r(430px);
                height: r(53px);
                
                
                input{
                    width: r(350px);
//                  height: r(34px);
                    outline: none;
                    border: none;
                    font-size: r(20px);
                    font-family: "微软雅黑";
                    color: #8B8B8B;
//                  text-align: center;
                    background: #3d3d3d;
                    padding-right: r(39px);
                    padding-left: r(39px);
                    padding-top: r(17px);
                    padding-bottom: r(10px);
                }
            }
        }
        .load_suo{
            margin-top: r(16px);
        }
        .load_no{
            width: r(108px);
            height: r(20px);
            margin-left: r(457px);
            margin-top: r(26px);
            i{
                float: left;
                width: r(19px);
                height: r(19px);
                display: inline-block;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            span{
                float: right;
                font-family: "微软雅黑";
                font-size: r(19.53px);
                color: white;
                margin-top: r(-3px);
            }
        }
        .load_buttom{
            width: r(492px);
            height: r(53px);
            background: red;
            margin-left: r(73px);
            margin-top:r(59px);
            text-align: center;
            line-height: r(53px);
            font-family: "微软雅黑";
            font-size: r(24px);
            letter-spacing: r(10px);
            color: white;
            
        }
        .load_buttom2{
            width: r(492px);
            height: r(53px);
            background: #303030;
            margin-left: r(73px);
            margin-top:r(14px);
            text-align: center;
            line-height: r(53px);
            font-family: "微软雅黑";
            font-size: r(24px);
            letter-spacing: r(10px);
            color: white;
            
        }
    } 
    .grzx{
        width: 100%;
        height: 100%;
        position:absolute;
        top: 0;
        left: 0;
        z-index: 11;
        background: #1e1e1e;
        overflow-y: hidden;
        transform: scale(0);
//      transform: translateY(-100%);
        -webkit-transform: scale(0);
        transition: all 1s;
        .grzx_img{
           width: r(198px);
           height: r(263px);
           margin-left: r(229px);
           margin-top: r(121px); 
           ul{
               li:nth-child(1){
                   div{
                       width: r(135px);
                       height: r(130px);
                       margin: 0 auto;
                       img{
                           width: 100%;
                           height: 100%;
                       }
                   }
               }
               li:nth-child(2){
                   margin-top: r(13px);
                   line-height: r(33px);
                   text-align: center;
                   span:first-child{
                       font-family: "微软雅黑";
                       font-size: r(25px);
                       color: white;
                   }
                    span:last-child{
                       font-family: "微软雅黑";
                       font-size: r(14px);
                       color: white;
                       border: 1px solid wheat;
                   }
               }
               li:nth-child(3){
                    margin-top: r(13px);
                   text-align: center;
                   font-size: r(20px);
                   color: #eeca02;
                   i:nth-child(2){
                       margin-left: 13px;
                   }
                   i:nth-child(3){
                       margin-left: 13px;
                   }
               }
               li:nth-child(4){
                    margin-top: r(13px);
                   span:nth-child(1){
                       font-family: "微软雅黑";
                       font-size: r(24px);
                       color: white;
                   }
                   span:nth-child(2){
                       font-family: "微软雅黑";
                       font-size: r(24px);
                       color: red;
                   }
                   span:nth-child(3){
                       font-family: "微软雅黑";
                       font-size: r(24px);
                       color: white;
                   }span:nth-child(4){
                       font-family: "微软雅黑";
                       font-size: r(24px);
                       color: white;
                   }
                   span:nth-child(5){
                       font-family: "微软雅黑";
                       font-size: r(24px);
                       color: red;
                   }
               }
           }
        }
        .grzx_wdsz{
                 margin-left: r(90px);
                 margin-top: r(20px);
                width: r(471px);
                height: r(53px);
               
                text-align: center;
                line-height: r(53px);
                font-size: r(24px);
                color: white;
                
            span:first-child{
                display: inline-block;
               width: r(220px);
                height: r(53px);
               background: #b60005;
                border-radius: r(53px);
            }
             span:last-child{
                 display: inline-block;
                 margin-left: r(20px);
                 width: r(220px);
                height: r(53px);
               background: #cdcdcd;
                border-radius: r(53px);
            }
        }
        .grzx_hs{
            width: 100%;
            height: r(24px);
            background: #2c2c2c;
            margin-top: r(20px);
        }
        .grzx_esc{
            text-align: center;
            width: r(180px);
            height: r(53px);
            background: red;
            border-radius: r(53px);
            line-height: r(53px);
            margin-left: r(235px);
            margin-top: r(500px);
            a{
            color: white;
            font-family: "微软雅黑";
            font-size: 24px;
            }
        }
        
    }  
        #hot_search_control{
            display: none;
        }
    #hot_search_control:checked+div[class="hot_search"]{
         -webkit-transform: translateY(0%);
        -webkit-transition: all 1s;
        transform: translateY(0%);
        overflow-y: auto;
        transition: all 1s;
    }
     #search_control{
            display: none;
        }
    #search_control:checked+div[class="search"]{
         -webkit-transform: translateY(0%);
        -webkit-transition: all 1s;
        transform: translateY(0%);
        transition: all 1s;
        overflow-y: auto;
    }
       #load_control{
            display: none;
        }
    #load_control:checked+div[class="load"]{
         -webkit-transform: translateX(0%);
        -webkit-transition: all 1s;
        transform: translateX(0%);
        transition: all 1s;
        overflow-y: auto;
    }
    #grzx_control{
            display: none;
        }
    #grzx_control:checked+div[class="grzx"]{
         -webkit-transform:  scale(1);
        -webkit-transition: all 1s;
        transform: scale(1);
//      transform: translateY(0%);
        transition: all 1s;
        overflow-y: auto;
    }
}
#color_8b8b8b{
    color: #8b8b8b;
}
#color_b60207{
    color: #b60207;
}
#color_B20000{
   color: #B20000;
}

